<template>
  <div class="home-wrapper">
    <lunboModel />
    <!-- 产品中心 -->
    <section class="section product-center">
      <h2 class="section-title">产品中心</h2>

      <div class="product-center-text">
        徽章 | 胸章 | 纪念币 | 奖牌 | 纪念章 | 奖章 | 钥匙扣 | 书签 | 冰箱贴 | 奖杯奖座 | 袖扣领带夹 | 胸针胸牌 | 纪念盘奖盘 | 筹码 | 标牌
      </div>
      <div
        class="product-grid fade-section"
        ref="productSection"
        :class="{ 'fade-in': showProduct }"
      >
        <div v-for="i in 12" :key="i" class="product-item">
          <img :src="imgs" alt="产品图片" @error="handleImageError" />
          <div class="product-name">产品名称{{ i }}</div>
        </div>
      </div>
    </section>

    <!-- 荣誉资质 -->
    <section class="section honor-section">
      <h2 class="section-title">金泊合作案例</h2>
      <div
        class="honor-list fade-section"
        ref="honorSection"
        :class="{ 'fade-in': showHonor }"
      >
        <div v-for="i in 5" :key="i" class="honor-item">
          <img :src="imgs" alt="荣誉图片" @error="handleImageError" />
          <div class="honor-name">案例{{ i }}</div>
        </div>
      </div>
    </section>

    <!-- 行业解决方案 -->
    <section class="section solution-section">
      <h2 class="section-title">高尖创新驱动 行业提升价值</h2>
      <div
        class="solution-grid fade-section"
        ref="solutionSection"
        :class="{ 'fade-in': showSolution }"
      >
        <div v-for="i in 4" :key="i" class="solution-item">
          <div class="solution-icon">🌟</div>
          <div class="solution-title">解决方案{{ i }}</div>
          <div class="solution-desc">这里是方案简介内容</div>
        </div>
      </div>
    </section>

    <!-- 公司介绍 -->
    <section class="section about-section">
      <h2 class="section-title">佳泊风采</h2>
      <div
        class="about-content fade-section"
        ref="aboutSection"
        :class="{ 'fade-in': showAbout }"
      >
        <div class="about-text">
          <h3>Jiabo Crafts</h3>
          <p>这里是公司简介内容，介绍企业文化、发展历程、主营业务等。</p>
          <button class="about-btn">了解更多</button>
        </div>
        <div class="about-img">
          <img :src="imgs" alt="公司图片" @error="handleImageError" />
        </div>
      </div>
    </section>

    <!-- 新闻中心 -->
    <section class="section news-section">
      <h2 class="section-title">新闻中心</h2>
      <div
        class="news-list fade-section"
        ref="newsSection"
        :class="{ 'fade-in': showNews }"
      >
        <div v-for="i in 3" :key="i" class="news-item">
          <img :src="imgs" alt="新闻图片" @error="handleImageError" />
          <div class="news-info">
            <div class="news-title">新闻标题{{ i }}</div>
            <div class="news-desc">这里是新闻简介内容</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 合作品牌 -->
    <section class="section brand-section">
      <h2 class="section-title">旗下品牌</h2>
      <div
        class="brand-list fade-section"
        ref="brandSection"
        :class="{ 'fade-in': showBrand }"
      >
        <div v-for="i in 6" :key="i" class="brand-item">
          <div class="brand-logo">
            <img :src="miniLogo" alt="品牌logo" />
          </div>
        </div>
      </div>
    </section>


  </div>

</template>

<script>
import imgs from './img/item.jpg'
import miniLogo from './img/miniLogo.png'
import lunboModel from './model/lunboModel.vue'
import errorHandler from '@/utils/errorHandler.js'

export default {
  name: 'HomeIndex',
  components: {
    lunboModel
  },
  data() {
    return {
      imgs,
      miniLogo,
      imageError: false,
      showProduct: false,
      showHonor: false,
      showSolution: false,
      showAbout: false,
      showNews: false,
      showBrand: false
    }
  },
  mounted() {
    // IntersectionObserver 监听各区块
    const sections = [
      { ref: 'productSection', key: 'showProduct' },
      { ref: 'honorSection', key: 'showHonor' },
      { ref: 'solutionSection', key: 'showSolution' },
      { ref: 'aboutSection', key: 'showAbout' },
      { ref: 'newsSection', key: 'showNews' },
      { ref: 'brandSection', key: 'showBrand' }
    ]
    const options = { threshold: 0.15 }
    const observer = new window.IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const key = entry.target.getAttribute('data-key')
          if (key && !this[key]) {
            this[key] = true
            observer.unobserve(entry.target)
          }
        }
      })
    }, options)
    // 绑定data-key并监听
    this.$nextTick(() => {
      sections.forEach(({ ref, key }) => {
        const el = this.$refs[ref]
        if (el) {
          el.setAttribute('data-key', key)
          observer.observe(el)
        }
      })
    })
  },
  methods: {
    handleImageError(event) {
      console.warn('图片加载失败:', event)
      this.imageError = true
    },
    scrollToTop() {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  },
  errorCaptured(err, vm, info) {
    return errorHandler.handleComponentError(err, vm, info)
  }
}
</script>

<style scoped>
.home-wrapper {
  width: 100%;
  background: #fafbfc;
}
.section {
  padding: 48px 0 32px 0;
  margin-bottom: 0;
  background: #fff;
}
.section-title {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #22565c;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1140px;
  margin: 0 auto;
}
.product-item {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.product-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
}
.product-name {
  margin-top: 12px;
  font-size: 1rem;
  color: #333;
}
.honor-section {
  background: #222 url('@/assets/image/bc.jpg') center/cover no-repeat;
  color: #fff;
}
.honor-list {
  display: flex;
  justify-content: center;
  gap: 32px;
  max-width: 1140px;
  margin: 0 auto;
}
.honor-item {
  text-align: center;
}
.honor-item img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #fff;
}
.honor-name {
  margin-top: 8px;
  color: #fff;
}
.solution-section {
  background: #f5f7fa;
}
.solution-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1140px;
  margin: 0 auto;
}
.solution-item {
  background: #fff;
  border-radius: 8px;
  padding: 24px 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.solution-icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
}
.solution-title {
  font-weight: bold;
  margin-bottom: 6px;
}
.solution-desc {
  color: #888;
  font-size: 0.95rem;
}
.about-section {
  background: #fff;
}
.about-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1140px;
  margin: 0 auto;
  gap: 48px;
}
.about-text {
  flex: 1;
}
.about-img {
  flex: 1;
  text-align: right;
}
.about-img img {
  width: 320px;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
}
.about-btn {
  margin-top: 18px;
  padding: 8px 24px;
  background: #22565c;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.news-section {
  background: #f5f7fa;
}
.news-list {
  display: flex;
  justify-content: center;
  gap: 32px;
  max-width: 1140px;
  margin: 0 auto;
}
.news-item {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  overflow: hidden;
  width: 300px;
}
.news-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}
.news-info {
  padding: 16px;
}
.news-title {
  font-weight: bold;
  margin-bottom: 8px;
}
.news-desc {
  color: #888;
  font-size: 0.95rem;
}
.brand-section {
  background: #fff;
}
.brand-list {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  max-width: 1140px;
  margin: 0 auto;
}
.brand-item {
  width: 120px;
  max-height: 110px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #22565c;
  font-weight: bold;
 
}
.brand-item {
  border: 1px solid #22565c;
}
.brand-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-item img,
.honor-item img,
.news-item img,
.about-img img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}
.fade-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);
}
.fade-in {
  opacity: 1 !important;
  transform: none !important;
}

.extra-section {
  background: #f5f7fa;
}
.extra-content {
  max-width: 1140px;
  margin: 0 auto;
}
.extra-item {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.extra-item h3 {
  color: #22565c;
  margin-bottom: 12px;
  font-size: 1.2rem;
}
.extra-item p {
  color: #666;
  line-height: 1.6;
}

.product-center-text{
  text-align: center;
  color: #999999;
  margin: 0 0 30px 0px;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .section {
    padding: 30px 0 20px 0;
  }
  
  .section-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
  }
  
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 0 15px;
  }
  
  .product-item {
    padding: 0;
  }
  
  .product-item img {
    height: 160px;
    width: 160px;
  }
  
  .product-name {
    font-size: 0.9rem;
    margin-top: 8px;
  }
  
  .honor-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0 15px;
  }
  
  .honor-item img {
    width: 100%;
    height: 160px;
  }
  
  .solution-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 0 15px;
  }
  
  .solution-item {
    padding: 20px 10px;
  }
  
  .solution-icon {
    font-size: 1.8rem;
  }
  
  .solution-title {
    font-size: 0.9rem;
  }
  
  .solution-desc {
    font-size: 0.85rem;
  }
  
  .about-content {
    flex-direction: column;
    gap: 30px;
    padding: 0 15px;
  }
  
  .about-text {
    text-align: center;
  }
  
  .about-img img {
    width: 100%;
    max-width: 280px;
    height: auto;
  }
  
  .news-list {
    flex-direction: column;
    gap: 20px;
    padding: 0 15px;
  }
  
  .news-item {
    width: 100%;
  }
  
  .brand-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0 15px;
  }
  
  .brand-item {
    width: 100%;
    border-radius: 0;
  }
  
  .product-center-text {
    font-size: 11px;
    margin: 0 0 20px 0;
    padding: 0 15px;
  }
}

@media (max-width: 480px) {
  .section {
    padding: 25px 0 15px 0;
  }
  
  .section-title {
    font-size: 1.3rem;
  }
  
  .product-grid {
    /* grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 10px; */
    /* margin-right: auto;
    margin-left: auto;
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    max-height: 250px; */
    padding:0;
  }
  
  .solution-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 10px;
  }
  
  .about-content {
    padding: 0 10px;
  }
  
  .news-list {
    padding: 0 10px;
  }
  
  .brand-list {
    padding: 0 10px;
  }
  
  .product-center-text {
    padding: 0 10px;
  }
}
/* 移动端底部导航栏 */
.mobile-tabbar {
  display: none;
}
@media (max-width: 768px) {
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: #fff;
    border-top: 1px solid #eee;
    z-index: 9999;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
  }
  .tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 12px;
    padding: 0 2px;
    cursor: pointer;
    transition: color 0.2s;
  }
  .tabbar-item:active {
    color: #22565c;
  }
  .tabbar-item i {
    font-size: 22px;
    margin-bottom: 2px;
  }
  body {
    padding-bottom: 56px !important;
  }
}
</style>
